<template>
  <view>
    <view class="content">
    <u-toast ref="uToast" />
    <view class="status_bar">
      <view class="top_view" v-if="topbackground"></view>
      <image
        src="/static/background_mine.png"
        mode=""
        style="width: 100%"
        v-else
      ></image>
    </view>

    <view style="height: 85rpx"> </view>
    <view class="setup">
      <!-- <image class="logo" src="/static/remind.png" @click="tosetup('../notice/notice')"></image> -->
      <image
        class="logo"
        src="/static/setup.png"
        style="margin-left: 20rpx"
        @click="tosetup('../set_up/set_up')"
      ></image>
    </view>

    <view class="information" v-if="userinfo != null">
      <image
        :src="userinfo.avatar"
        style=""
        class="information_img"
        mode="aspectFit "
        v-if="userinfo.avatar != null"
      ></image>
      <image
        src="/static/default-avatar.png"
        style="width: 80rpx; height: 80rpx"
        mode="scaleToFill"
        v-else
      ></image>
      <view class="information_right" v-if="userinfo != null && userinfo != ''">
        <view class="information_right_top">
          <text style="" class="information_right_id">{{
            userinfo.nickname
          }}</text>

          <view style="" class="information_right_certification_log">
            <text
              :class="
                userinfo.is_certification == 1 ||
                userinfo.certification_log != null
                  ? 'information_right_yes'
                  : 'information_right_no'
              "
              @click="toRealname()"
            >
              {{
                userinfo
                  ? userinfo.is_certification == 1 ||
                    userinfo.certification_log != null
                    ? "已认证"
                    : "请先去实名认证"
                  : ""
              }}</text
            >
            <image
              src="/static/jiantouss.png"
              style="width: 20rpx; height: 20rpx"
              v-if="
                userinfo != null &&
                userinfo.is_certification == 0 &&
                userinfo.certification_log == null
              "
            ></image>
          </view>
        </view>
        <view
          style="display: flex; align-items: center; margin-top: 16rpx"
          v-if="userinfo != null"
        >
          <text
            style=""
            class="information_right_bottom"
            v-if="userinfo != null"
            >地址 : {{ userinfo ? userinfo.chain_address : "" }}</text
          >
          <image
            src="/static/copy.png"
            style="width: 32rpx; height: 32rpx; margin-left: 20rpx"
            @click="copy"
          ></image>
        </view>
      </view>

      <view v-else @click="login">
        <text style="font-size: 32rpx; font-weight: bold; margin-left: 20rpx"
          >点击登录</text
        >
      </view>

      <view
        v-if="userinfo"
        class="information_wallet"
        @click.stop="handleToWallet"
        >我的藏品</view
      >
    </view>

    <view class="information" v-else>
      <image
        src="/static/default-avatar.png"
        style="width: 80rpx; height: 80rpx"
        mode="scaleToFill"
      ></image>

      <view @click="login">
        <text style="font-size: 32rpx; font-weight: bold; margin-left: 20rpx"
          >点击登录</text
        >
      </view>
    </view>

    <view class="empty_block"></view>

    <view class="btn">
      <block v-for="(item, index) in mineBtnLists_computed" :key="index">
        <view class="user_btn" @click="tobtn(item.url, item.name)">
          <image
            :src="item.photo"
            style="width: 60rpx; height: 60rpx; margin-bottom: 10rpx"
          ></image>
          <text>{{ item.name }}</text>
        </view>
      </block>
    </view>

    <view class="Collection">
      <view class="Collection_top">
        <view style="display: flex">
          <!-- <u-tabs :list="labellist" :is-scroll="false" :current="labelid" @change="change" class="Collection_label"
           bg-color="#111218" active-color="#ffffff" inactive-color="#efefef" :bold="true"></u-tabs> -->
          <view
            @click="change(1)"
            :class="labelid == 1 ? 'Collection_tag' : 'Collection_tags'"
            >我的藏品 ({{ lengths }})</view
          >
          <view
            style="margin-left: 1rpx"
            @click="change(2)"
            :class="labelid == 2 ? 'Collection_tag' : 'Collection_tags'"
            >我的盲盒 ({{ Blindboxlengths }})</view
          >
          <span
            :class="labelid == 1 ? 'Collection_bottom' : 'Collection_bottoms'"
          ></span>
        </view>
        <image
          :src="
            !GongGestate ? '/static/Collections.png' : '/static/Collection.png'
          "
          style="width: 44rpx; height: 44rpx"
          @click="GongGe()"
        ></image>
      </view>
      <view
        :class="!GongGestate ? 'Collection_item' : 'CollectionNew_item'"
        v-if="labelid == 1"
      >
        <block v-for="(item, index) in Collection" :key="index">
          <view class="Collection_img" @click="toCollection(item, index)">
            <view class="badge" v-if="item.can_exchange == 1">兑换</view>
            <view
              :class="!GongGestate ? 'quantity' : 'quantitynew'"
              v-if="item.num != 1"
              >{{ item.num }}</view
            >
            <view class="">
              <image
                :src="item.cover"
                :class="
                  !GongGestate ? 'Collection_image' : 'CollectionNew_image'
                "
              ></image>
            </view>
            <view class="Collection_right">
              <text class="Collection_right_text">{{ item.name }}</text>
              <view style="display: flex; align-items: center">
                <image
                  src="/static/collect_icon.png"
                  style="width: 44rpx; height: 44rpx"
                  class="item_farstimg"
                ></image>
                <view
                  class="item_center"
                  :class="!GongGestate ? 'item_center1' : 'item_center2'"
                  >{{ item.no }}</view
                >
              </view>
              <view
                style="display: flex; align-items: center; margin-top: 20rpx"
              >
                <image
                  :src="item.creator_avatar"
                  style="
                    width: 34rpx;
                    height: 34rpx;
                    margin-right: 10rpx;
                    border-radius: 50rpx;
                  "
                ></image>
                <view
                  style="font-size: 24rpx"
                  :class="
                    !GongGestate ? 'creator_name_style1' : 'creator_name_style2'
                  "
                  >{{ item.creator_name }}
                  </view>

              </view>
              <text v-if="userinfo.is_ysj_merchant == 1 && item.is_for_cash" :class="!GongGestate?'withdrawal':'withdrawal2' " @click.stop="tobtn(`/pages/destruction/destruction?id=${item.first_user_product.product_id}`)">兑换提现额度</text>
            </view>
          </view>
        </block>
      </view>

      <view
        :class="!GongGestate ? 'Collection_item' : 'CollectionNew_item'"
        v-else-if="Blindboxidstate"
      >
        <block v-for="(item, index) in Collection" :key="index">
          <view class="Collection_img" @click="toCollection(item, index)">
            <view class="">
              <image
                :src="item.product_snap.cover"
                :class="
                  !GongGestate ? 'Collection_image' : 'CollectionNew_image'
                "
              ></image>
            </view>
            <view class="Collection_right">
              <view class="Collection_right_text">{{
                item.product_snap.name
              }}</view>
              <view style="display: flex; align-items: center">
                <image
                  :src="item.product_snap.creator_avatar"
                  style="
                    width: 34rpx;
                    height: 34rpx;
                    margin-right: 10rpx;
                    border-radius: 50rpx;
                  "
                ></image>
                <view
                  style="font-size: 24rpx"
                  :class="
                    !GongGestate ? 'creator_name_style1' : 'creator_name_style2'
                  "
                  >{{ item.product_snap.creator_name }}</view
                >
              </view>
              <view class="Collectio_button" @click.stop="openBlindboxs(index)">
                开启盲盒
              </view>
              <!-- <view  class="Collectio_openbutton" v-else v-if="openboxstate">
									已开启
								</view> -->
            </view>
          </view>
        </block>
      </view>

      <empty :show.sync="Collection.length == 0 && state"></empty>
    </view>

    <!-- 	<view class="bottom" @click="tofeedback">
			<view style="display:flex;align-items: center;">
				<image src="/static/problem.png" style="width: 30rpx;height: 30rpx;margin:0 20rpx 0 30rpx;"></image>
				<text style="font-size: 28rpx;">问题反馈</text>
			</view>
			<view style="margin-right: 30rpx;">
				<image src="/static/jiantou.png" style="width: 30rpx;height: 30rpx;"></image>
				<span></span>
			</view>
		</view> -->
    <view style="padding-bottom: 30rpx"></view>

    <u-popup
      v-model="Blindstate"
      mode="center"
      width="510rpx"
      height="680rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
      @close="getproducts"
    >
      <view class="Blindbox">
        <view class="Blindbox_top"> 恭喜您！ </view>
        <view class="Blindbox_center">
          开出<span style="color: #1fe7e7">《{{ Blindboxdetail.name }}》</span>
        </view>
        <view
          style="
            border-radius: 32rpx;
            border: 2rpx solid #dfdfdf;
            margin-top: 30rpx;
          "
        >
          <image :src="Blindboxdetail.cover" class="Blindbox_img"></image>
        </view>
        <view class="Blindbox_button" @click="toCollections()"> 查看 </view>
      </view>
    </u-popup>

    <u-popup
      v-model="Transaction"
      mode="center"
      width="490rpx"
      height="290rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
    >
      <view class="Transaction_eject">
        <text class="Transaction_top">输入交易密码</text>
        <input
          type="password"
          value=""
          class="Transaction_center"
          v-model="jypassword"
        />
        <text class="Transaction_bottom" @click="password">确定</text>
      </view>
    </u-popup>
  </view>
    <tabbar :key="gettoken" :current="4"></tabbar> 
  </view>
</template>

<script>
import api from "../../api/api";
import tip from "@/utils/tip.js";
import { isLogin } from "@/utils/auth.js";
import tabbar from "../../components/tabbar/tabbar.vue";
export default {
  data() {
    return {
      Transaction: false, //交易状态
      jypassword: "",
      Blindstate: false, //开启的盲盒状态
      openboxstate: true, //是否开启过
      Blindboxidstate: false, //盲盒列表
      state: false, //暂无数据
      Blindboxid: "",
      labellist: [
        {
          name: "我的藏品",
        },
        {
          name: "我的盲盒",
        },
      ],
      labelid: 1,
      userinfo: null,
      mineBtnLists: [
        {
          photo: "/static/Transaction_record.png",
          name: "交易记录",
          url: "../../pages/transaction_record/transaction_record",
        },
        // {
        //   photo: "/static/follow.png",
        //   name: "我的藏品",
        //   url: "../collectionNew/collectionNew",
        // },
        {
          photo: "/static/product.png",
          name: "合成藏品",
          url: "../compoundlist/compoundlist",
        },
        {
          photo: "/static/friend.png",
          name: "邀请好友",
          url: "../../pages/invitationnew/invitationnew",
        },
        // {
        //   photo: "/static/mine_sell_icon.png",
        //   name: "挂售商家",
        //   url: "../../pages/becomeMerchant/becomeMerchant",
        // },
        // {
        //   photo: "/static/apply_cooperation.png",
        //   name: "申请合作",
        //   url: "../../pages/apply_cooperation/apply_cooperation",
        // },
        // {
        //   photo: "/static/ranking_icon.png",
        //   name: "排行榜",
        //   url: "../../pages/Invitation_ranking/Invitation_ranking",
        // },
        // {
        //   photo: "/static/my_sell_icon.png",
        //   name: "我的寄售",
        //   url: "../../pages/online_list/online_list",
        // },
        // {
        //   photo: "/static/integral_icon.png",
        //   name: "我的积分",
        //   url: "../../pages/my_integral/my_integral",
        // },
        // {
        //   photo: "/static/cashWallet_icon.png",
        //   name: "现金钱包",
        //   url: "../../pages/wallet/wallet",
        // },
        {
          photo: "/static/coinWallet_icon.png",
          name: "零钱钱包",
          url: "../../pages/coinWallet/coinWallet",
        },
        // {
        //   photo: "/static/my_bill_icon.png",
        //   name: "我的买单",
        //   url: "../../pages/my_bill/hanging_sale",
        // },
        {
          photo: "/static/my_deal_icon.png",
          name: "我的成交",
          url: "../../pages/my_deal/my_deal",
        },
        {
          photo: "/static/shande_icon.png",
          name: "杉德钱包",
          url: "../../pages/shandeWallet/shandeWallet",
        },
        // {
        //   photo: "/static/wen_icon.png",
        //   name: "文创积分",
        //   url: "../../pages/wenchuang_integral/wenchuang_integral",
        // },
        {
          photo: "/static/destruction.png",
          name: "CA兑换记录",
          url: "../../pages/destroy_records/destroy_records",
        },
      ],
      Collection: [],
      lengths: 0,
      Blindboxlengths: 0,
      GongGestate: false, //宫格状态
      topbackground: true,
      Blindboxdetail: [],
      product_snap: JSON.parse(
        `{\"id\":41,\"category\":1,\"type\":1,\"no\":\"test1\",\"name\":\"\稀\有nft\",\"cover\":\"http:\\/\\/img.yunshiar.com\\/bad3df92-2d0e-4328-88a2-e7c12c2dabc7.jpeg\",\"resources_url\":\"http:\\/\\/img.yunshiar.com\\/d1474bf8-d483-43ae-9941-8f9a13bb6de4.jpeg\",\"creator_name\":\"jzf\",\"creator_avatar\":\"http:\\/\\/img.yunshiar.com\\/32c947f5-757c-4867-a63d-849f960ef299.jpeg\",\"synopsis\":\"\稀\有nft\",\"introduce\":\"<p>111<\\/p>\",\"issuer_user_id\":24,\"price\":\"1.00\",\"total_num\":10,\"issued_num\":7,\"handle_status\":1,\"surplus_num\":10,\"is_on\":0,\"order_effective_duration\":8,\"opening_at\":\"2022-05-28 00:00:00\",\"first_buy_at\":null,\"first_buy_num\":0,\"buy_limit\":10,\"sort_weight\":1,\"created_at\":\"2022-05-25 15:31:08\",\"updated_at\":\"2022-05-25 15:33:12\",\"deleted_at\":null,\"issuer\":{\"id\":24,\"nickname\":\"jzf\发\行\方\",\"username\":null,\"account\":\"0\",\"avatar\":null,\"gender\":null,\"wx_shop_openid\":null,\"wx_unionid\":null,\"is_normal\":1,\"last_login_at\":null,\"invitation_code\":null,\"chain_address\":\"0x8a7cfc9629bc08122d0e26ddb31555eb6a5142fd\",\"type\":2,\"is_frist_buy\":0,\"total_first_buy_num\":10090,\"register_ip\":null,\"login_ip\":null,\"created_at\":\"2022-04-22 17:33:14\",\"updated_at\":\"2022-05-25 00:01:07\"}}`
      ),

      MerchantDetail: null,
      show_review: false,

      shande_wallet_url: "",

      gettoken:null
    };
  },
  computed: {
    mineBtnLists_computed() {
      if (!uni.getStorageSync("unique_code")) {
        let index = this.mineBtnLists.findIndex((e)=>{
          return e.name == '文创积分'
        })
        if(index == -1){
          let item = {
            photo: "/static/wen_icon.png",
            name: "文创积分",
            url: "../../pages/wenchuang_integral/wenchuang_integral",
          }
          this.mineBtnLists.splice(this.mineBtnLists.length-1,0,item);
        }
      }
      if(this.gettoken){
        let list = [
          {
            photo: "/static/mine_sell_icon.png",
            name: "挂售商家",
            url: "../../pages/becomeMerchant/becomeMerchant",
          },
          {
            photo: "/static/my_sell_icon.png",
            name: "我的寄售",
            url: "../../pages/online_list/online_list",
          },
        ]
        this.mineBtnLists.splice(3,0,...list)
      }else{
        let index = this.mineBtnLists.findIndex((e)=>{
          return e.name == '挂售商家' || e.name == '我的寄售'
        })
        if(index != -1) this.mineBtnLists.splice(3,2)
      }
      return this.mineBtnLists;
    },
  },
  components:{
    tabbar
  },
  onLoad() {
    // this.info()
    // uni.$off();
    // uni.$on("globleEvent",async (res)=>{
    // 	 this.info()
    // 	 setTimeout(()=>{
    // 		 this.getproducts();
    // 	 },500)
    // })
  },
  async onShow() {
    this.gettoken = uni.getStorageSync("token")
    // this.getWalletUrl();
    // this.userinfo = uni.getStorageSync("userInfo");
    await this.info();
    this.format();

    // this.userinfo = uni.getStorageSync('userInfo')
    // if(uni.getStorageSync('token').length>0){
    // 	this.userinfo = uni.getStorageSync('userInfo')
    // }

    this.getproducts();
    this.getDetail();
  },
  onPullDownRefresh() {},
  //监听页面滚动
  onPageScroll(e) {
    if (e.scrollTop > 15) {
      this.topbackground = false;
    } else {
      this.topbackground = true;
    }
  },
  onTabItemTap(e) {
    this.info();
  },
  methods: {
    async handleToWallet() {
      await isLogin();
      uni.navigateTo({
        url: "../zhenmao/zhenmao_wallet",
      });
    },
    async password() {
      if (this.jypassword == "") {
        this.$refs.uToast.show({
          title: "请输入交易密码",
        });
        return;
      }
      let res = await api.openBlindBox({
        query: {
          user_product_id: this.Blindboxid,
          operation_password: this.jypassword,
        },
        method: "POST",
        loading: "加载中",
      });
      if (res.code == 0) {
        this.Blindboxid = res.data.id;
        this.Blindboxdetail = JSON.parse(res.data.product_snap);

        this.Transaction = false;
        this.Blindstate = true;
        this.openboxstate = false;
        this.info();
        this.jypassword = "";
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
    toCollections() {
      uni.navigateTo({
        url: `../../pages/collect_record/collect_record?user_product_id=${this.Blindboxid}`,
      });
      this.Blindstate = false;
    },
    async openBlindboxs(index) {
      // this.Transaction = true;
      this.Blindboxid = this.Collection[index].id;

      let res = await api.openBlindBox({
        query: {
          user_product_id: this.Blindboxid,
          operation_password: this.jypassword,
        },
        method: "POST",
        loading: "加载中",
      });
      if (res.code == 0) {
        this.Blindboxid = res.data.id;
        this.Blindboxdetail = JSON.parse(res.data.product_snap);

        this.Transaction = false;
        this.Blindstate = true;
        this.openboxstate = false;
        this.info();
        this.jypassword = "";
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
    change(index) {
      if (uni.getStorageSync("token") == "") {
        uni.navigateTo({
          url: "../signin/signin",
        });

        return;
      }
      this.labelid = index;
      this.state = false;
      this.Collection = [];
      this.$u.debounce(this.getproducts, 500, false);
      // this.getproducts();
    },
    GongGe() {
      // uni.navigateTo({
      // 		url:'../Transfer_record/Transfer_record',
      // 	})
      this.GongGestate = !this.GongGestate;
    },
    async getDetail() {
      let res = await api.userMerchantDetail({
        method: "get",
        query: {},
        loading: "加载中",
      });

      if (res.code == 0) {
        // 1审核中，2成功，3失败
        this.MerchantDetail = res.data;
        this.show_review = this.MerchantDetail
          ? this.MerchantDetail.examine_status == "1"
          : false;
      } else {
        tip.defaults(res.msg);
      }
    },
    // async getWalletUrl() {
    //   let res = await api.getWalletUrl({
    //     method: "get",
    //     query: {},
    //   });

    //   if (res.code == 0) {
    //     this.shande_wallet_url = res.data;
    //   } else {
    //     tip.defaults(res.msg);
    //   }
    // },
    tobtn(url, name) {
      if (uni.getStorageSync("token") == "") {
        uni.navigateTo({
          url: "../signin/signin",
        });
        this.userinfo = null;
        // this.$refs.uToast.show({
        // 	title: '请先登录',
        // })
        return;
      }
      if (url == "") {
        this.$refs.uToast.show({
          title: "敬请期待!",
        });
        return;
      }
      if (
        name == "挂售商家" &&
        this.MerchantDetail &&
        this.MerchantDetail.examine_status == 2
      ) {
        uni.navigateTo({
          url: "../../pages/MerchantDetail/MerchantDetail",
        });
        return;
      }
      // if (name == "杉德钱包") {
      //   // #ifdef H5
      //   if (this.shande_wallet_url) {
      //     window.location.href = this.shande_wallet_url;
      //   }
      //   // #endif

      //   // #ifdef APP-PLUS
      //   if (this.shande_wallet_url) {
      //     plus.runtime.openURL(this.shande_wallet_url);
      //   }
      //   // #endif
      //   return;
      // }
      uni.navigateTo({
        url: url,
      });
    },
    async getproducts() {
      if (uni.getStorageSync("token") == "") {
        this.Collection = [];
        this.lengths = 0;
        this.Blindboxlengths = 0;
        this.state = true;
        return;
      }

      let userInfo = uni.getStorageSync("userInfo");

      let limlts = 999;
      // if (this.labelid == 2) {
      //   limlts = 999;
      // }

      if (this.labelid == 1) {
        let res = await api.stackingProducts({
          query: {
            user_id: userInfo.id,
            product_category: this.labelid,
            limit: limlts,
          },
        });
        this.Blindboxidstate = false;
        this.Collection = [];
        this.lengths = 0;
        this.Blindboxlengths = 0;

        this.state = true;

        this.Collection = res.data;

        this.lengths = userInfo.user_product_num;
        this.Blindboxlengths = userInfo.blind_box_num;
      } else {
        let res = await api.products({
          query: {
            user_id: userInfo.id,
            product_category: this.labelid,
            limit: limlts,
          },
        });
        this.Blindboxidstate = false;

        // this.Collection = res.data

        this.Collection = [];
        this.lengths = 0;
        this.Blindboxlengths = 0;

        if (this.labelid == 2) {
          this.Blindboxidstate = true;
        }
        this.state = true;

        //   for (var i = 0; i < res.data.length; i++) {
        // 	  // this.Collection.push(res.data[i].product)
        // 	  // JSON.parse(this.Collection[i].product_snap)
        // 	  //this.Collection.push(JSON.parse(res.data[i].product_snap))
        // 	    this.Collection = res.data;
        //   }
        this.Collection = res.data;

        if (this.labelid == 2) {
          this.Collection.forEach((x) => {
            x.product_snap = JSON.parse(x.product_snap);
          });
        }

        this.lengths = userInfo.user_product_num;
        this.Blindboxlengths = userInfo.blind_box_num;
      }
    },
    async toCollection(item, index) {
      if (this.Transaction) {
        return;
      }
      if (this.labelid == 1) {
        this.Collection[index].id = item.first_user_product.id;
      }
      if (item.num != 1 && this.labelid == 1) {
        uni.navigateTo({
          url: `../../pages/collectionNewlist/collectionNewlist?product_id=${item.product_id}&can_exchange=${item.can_exchange}`,
        });
        return;
      }
      uni.navigateTo({
        url: `../../pages/collect_record/collect_record?user_product_id=${this.Collection[index].id}`,
      });
    },
    async info() {
      let res = await api.info({});
      uni.setStorageSync("userInfo", res.data);
      if (res.msg == "请先登录") {
        // uni.navigateTo({
        // 	url:'../signin/signin'
        // })
        this.userinfo = null
        return;
      }
      if (res.code == 0) {
        this.userinfo = res.data;
        this.format();
      }
    },
    format() {
      if (uni.getStorageSync("token") == "" || !this.userinfo) {
        return;
      }
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      this.userinfo.account = this.userinfo.account.replace(reg, "$1****$2");
      this.userinfo.chain_address =
        this.userinfo.chain_address.substring(0, 6) +
        "..." +
        this.userinfo.chain_address.substring(
          this.userinfo.chain_address.length - 4
        );
    },
    tosetup(url) {
      if (uni.getStorageSync("token") == "") {
        uni.navigateTo({
          url: "../signin/signin",
        });
        // this.$refs.uToast.show({
        // 	title: '请先登录',
        // })
        return;
      }
      uni.navigateTo({
        url: url,
      });
    },
    login() {
      uni.navigateTo({
        url: "../signin/signin",
      });
    },
    tofeedback() {
      if (uni.getStorageSync("token") == "") {
        uni.navigateTo({
          url: "../signin/signin",
        });
        // this.$refs.uToast.show({
        // 	title: '请先登录',
        // })
        return;
      }
      uni.navigateTo({
        url: "../feedback/feedback",
      });
    },
    toRealname() {
      if (
        this.userinfo.is_certification == 0 &&
        this.userinfo.certification_log == null
      ) {
        uni.navigateTo({
          url: "../real_name/real_name",
        });
      }
    },
    copy() {
      let userinfo = uni.getStorageSync("userInfo");
      uni.setClipboardData({
        data: userinfo.chain_address, //要被复制的内容
      });
      uni.hideToast();
      this.$refs.uToast.show({
        title: "复制成功",
        type: "succes",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  background-image: url("/static/background_mine.png");
  background-repeat: no-repeat;
  /* background-position: center; */
  background-attachment: fixed;
  /* background-size: cover; */
  background-size: 100%;

  /* -webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover; */

  width: 100%;
  background-color: $bg-color1;
  // min-height: 100vh;
  min-height: calc(100vh - 44px);
}

.logo {
  height: 40rpx;
  width: 40rpx;
}
.setup {
  padding: 10rpx;
  position: absolute;
  // top: 120rpx;
  top: 90rpx;
  right: 30rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.information {
  position: relative;
  top: 80rpx;
  margin-left: 30rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #ffffff;
  .information_img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
  }
  .information_wallet {
    padding: 0 22rpx;
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    // width: 116rpx;
    height: 60rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 60rpx;

    background-image: url("/static/mine_wallet.png");
    background-repeat: no-repeat;
    // background-attachment: fixed;
    background-size: 100%;
  }
}
.empty_block {
  padding-top: 120rpx;
}
.btn {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // align-items: center;
  align-content: flex-start;

  padding: 8rpx 0;
  margin: 0 30rpx;
  // justify-content: space-between;
  // justify-content: center;

  // 两行
  height: 296rpx;
  background: url("/static/btn_group_bg_small.png");

  // 三行
  // height: 424rpx;
  // background: url("/static/btn_group_bg.png");

  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: 100%;
}
.user_btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin: 24rpx 0 0 0;
  color: #ffffff;
  font-size: 24rpx;
  height: 104rpx;
  width: calc((100%) / 5);
}
.user_btn:not(:first-child) {
  // margin-left: 40rpx;
}
.Collection {
  // min-height: calc(100vh - 461rpx);
  min-height: calc(100vh - 85rpx - 100rpx - 120rpx - 424rpx - 54rpx);
  color: #ffffff;
  font-size: 32rpx;
  // margin: 40rpx 30rpx;
  padding: 40rpx 30rpx;
  background: linear-gradient(
    180deg,
    rgba(64, 67, 67, 0.4) 0%,
    #1e2020 22%,
    #1e2020 100%
  );
}
.Collection_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  align-content: center;
  position: relative;
  .Collection_tag {
    color: $text-color3;
    padding-bottom: 10rpx;
    width: 215rpx;
    border-radius: 6rpx;
    font-size: 34rpx;
  }
  .Collection_tags {
    padding-bottom: 10rpx;
    width: 215rpx;
    border-radius: 6rpx;
    font-size: 32rpx;
  }
  .Collection_bottom {
    position: absolute;
    top: 25px;
    left: 0px;
    height: 3px;
    width: 50px;
    // background-color: #54a0ff;
    background-image: $button;
    transition: all 0.3s;
    border-radius: 6rpx;
  }
  .Collection_bottoms {
    position: absolute;
    top: 25px;
    left: 117px;
    height: 3px;
    width: 50px;
    // background-color: #54a0ff;
    background-image: $button;
    transition: all 0.3s;
    border-radius: 6rpx;
  }
  .Collection_label {
    width: 300rpx;
    background-color: #111218;
  }
}
.CollectionNew_item {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;

  /* align-items: flex-start;
		margin:30rpx 0; */
  .Collection_img {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    // background-color: #1c1e27;
    border-radius: 15rpx;
    margin: 15rpx 0 15rpx 0;
    width: 48%;
    // height: 540rpx;
    position: relative;

    background-image: url("/static/backgroundNew.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    .CollectionNew_image {
      width: 330rpx;
      height: 330rpx;
      border-radius: 24rpx;
    }

    .Collection_right {
      margin-left: 30rpx;
      padding: 20rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      // height: 200rpx;
      .Collection_right_text {
        font-size: 28rpx;
        // padding-top: 15rpx;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
      }
      .Collectio_button {
        margin-top: 24rpx;
        // margin: 24rpx 20rpx 0;
        width: 290rpx;
        height: 60rpx;
        // border-radius: 30rpx;
        color: $text-color4;
        background: $button;
        background-repeat: no-repeat;
        // background-attachment: fixed;
        background-size: 100% 100%;
        text-align: center;
        line-height: 60rpx;
        font-size: 28rpx;
      }
      .Collectio_openbutton {
        margin-top: 24rpx;
        // margin: 24rpx 20rpx 0;
        width: 100%;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #606060;
        text-align: center;
        line-height: 60rpx;
        color: #ffffff;
        font-size: 28rpx;
      }
    }
  }
}
.Collection_item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;

  /* align-items: flex-start;
		margin:30rpx 0; */
  .Collection_img {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* border: 2rpx solid rgba(255,255,255,0.1); */
    // background-color: #1c1e27;
    /* padding-bottom: 30rpx; */
    /* border-radius: 80rpx 80rpx 24rpx 24rpx; */
    border-radius: 15rpx;
    margin: 15rpx 0 15rpx 0;
    width: 100%;
    height: 240rpx;
    position: relative;

    background-image: url("/static/background.png");
    background-repeat: no-repeat;
    background-position: center;
    /* background-attachment: fixed; */
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    .Collection_image {
      width: 240rpx;
      height: 240rpx;
      border-radius: 24rpx;
      margin-top: 10rpx;
    }

    .Collection_right {
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200rpx;
      .Collection_right_text {
        font-size: 28rpx;
        // padding-top: 15rpx;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .Collectio_button {
        width: 290rpx;
        height: 60rpx;
        // border-radius: 30rpx;
        color: $text-color4;
        background-image: $button;
        background-repeat: no-repeat;
        // background-attachment: fixed;
        background-size: 100% 100%;
        text-align: center;
        line-height: 60rpx;
        font-size: 28rpx;
      }
      .Collectio_openbutton {
        // margin: 24rpx 20rpx 0;
        width: 100%;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #606060;
        text-align: center;
        line-height: 60rpx;
        color: #ffffff;
        font-size: 28rpx;
      }
    }
  }
}
.bottom {
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx;
  color: #ffffff;
  border: 2rpx solid #1c1e27;
  background-color: #1c1e27;
  border-radius: 24rpx;
  height: 92rpx;
  line-height: 92rpx;
}
.item_center {
  position: relative;
  left: -30rpx;
  height: 32rpx;
  line-height: 32rpx;
  font-size: 20rpx;
  padding: 0 20rpx 0 34rpx;
  border-radius: 6rpx;
  color: $text-color4;
  background: $gradient1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item_center1 {
  max-width: 380rpx;
}
.item_center2 {
  max-width: 260rpx;
}
.creator_name {
  width: 240rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.creator_name_style1 {
  width: 320rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.creator_name_style2 {
  width: 240rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.item_farstimg {
  z-index: 2;
  position: relative;
  // top: 14rpx;
  // top: 2rpx;
  // left: -2rpx;
}
.information_right {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5rpx 20rpx;
  .information_right_top {
    display: flex;
    align-items: center;
    .information_right_certification_log {
      display: flex;
      align-items: center;
      .information_right_yes {
        border: 2rpx solid $text-color3;
        padding: 4rpx 10rpx;
        margin-left: 20rpx;
        color: $text-color3;
        border-radius: 8rpx;
        font-size: 24rpx;
      }
      .information_right_no {
        color: $text-color3;
        margin-left: 20rpx;
        padding: 4rpx 10rpx;
      }
    }
  }
  .information_right_id {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.information_right_bottom {
  font-size: 24rpx;
  // overflow: hidden;

  // width: 300rpx;

  // word-break:break-all;
  // margin-top: 5rpx;

  // overflow: hidden;
  // word-break: break-all;  /* break-all(允许在单词内换行。) */
  // text-overflow: ellipsis;  /* 超出部分省略号 */
  // display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  // -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  // -webkit-line-clamp: 1; /** 显示的行数 **/
}
.status_bar {
  width: 100%;
  position: fixed;
  top: 0;
  height: var(--status-bar-height);
  z-index: 800;
  overflow: hidden;
  // image{
  // 	object-fit: cover;
  // }
}
.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.Blindbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 680rpx;
  padding-top: 10%;
  // transform: translate(-0%,-20%);
  background: $bg-color3;
  position: relative;
  .Blindbox_top {
    font-size: 28rpx;
    color: #ffffff;
  }
  .Blindbox_center {
    margin-top: 10rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
  .Blindbox_img {
    width: 330rpx;
    height: 330rpx;
    border-radius: 24rpx;
    margin: 4rpx 4rpx -4rpx;
    -webkit-border-radius: 24rpx;
    -moz-border-radius: 24rpx;
  }
  .Blindbox_button {
    margin-top: 50rpx;
    width: 290rpx;
    height: 60rpx;
    // border-radius: 36rpx;

    background: $button;
    background-repeat: no-repeat;
    // background-attachment: fixed;
    background-size: 100% 100%;

    text-align: center;
    line-height: 60rpx;
    color: #ffffff;
    font-size: 28rpx;
  }
}
.Transaction_eject {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 290rpx;
  background-color: $bg-color1;
  .Transaction_top {
    margin-top: 50rpx;
    font-size: 32rpx;
    color: $text-color1;
  }
  .Transaction_center {
    padding: 0 20rpx;
    border: 2rpx solid #262934;
    background: $bg-color3;
    border-radius: 16rpx;
    height: 85rpx;
    width: 80%;
    color: #ffffff;
  }
  .Transaction_bottom {
    font-size: 32rpx;
    color: $text-color1;
    margin-bottom: 30rpx;
  }
}
.quantity {
  position: absolute;
  top: 0;
  left: 170rpx;
  color: #ffffff;
  z-index: 2;
  min-width: 28px;
  height: 28px;
  line-height: 36rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 25px;
  text-align: center;
  margin-top: 20rpx;
  font-size: 28rpx;
  padding: 10rpx;
}
.badge {
  width: 88rpx;
  height: 46rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  background: url("../../static/exchange_badge.png");
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 46rpx;
}
.quantitynew {
  position: absolute;
  top: 0;
  left: 260rpx;
  color: #ffffff;
  z-index: 2;
  min-width: 28px;
  height: 28px;
  line-height: 36rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 25px;
  text-align: center;
  margin-top: 20rpx;
  font-size: 28rpx;
  padding: 10rpx;
}
.withdrawal{
  width: 176rpx;
  height: 50rpx;
  background: linear-gradient(130deg, #1FE6E6 0%, #DF7FD6 100%);
  border-radius: 10rpx;
  position: absolute;
  right: 30rpx;
  bottom: 10rpx;
  line-height: 50rpx;
  text-align: center;
  white-space: nowrap;
  font-size: 24rpx;
}
.withdrawal2{
  width: 176rpx;
  height: 50rpx;
  background: linear-gradient(130deg, #1FE6E6 0%, #DF7FD6 100%);
  border-radius: 10rpx;
  line-height: 50rpx;
  text-align: center;
  white-space: nowrap;
  font-size: 24rpx;
  margin-top: 25rpx;
}
</style>

<style>
page {
  background-color: #111218;
}
</style>
